<template>
  <!-- 头部数据统计 -->
  <div class="header">
    <div class="card" v-for="item in cardList" :key="item.title"
         :style="{ 'BackgroundColor': 'item.BackgroundColor' }">
      <img :src="item.img" alt="" :style="{ 'font-size': '50px', 'color': item.color, 'margin-right': '10px', }">
      <div class="card-right">
        <h4>{{ item.num }}</h4>
        <p>{{ $t(item.title) }}</p>
      </div>
    </div>
  </div>
</template>
<script>

import {rpaStatisticalDetail} from "@/api/ytdg";
import totalImg from "@/assets/imgs/1.png";
import activeImg from "@/assets/imgs/3.png";
import draftImg from "@/assets/imgs/4.png";

export default {
  data() {
    return {
      cardList: []
    }
  },
  methods: {
    async open() {
      // console.log(1111)
      try {
        // 获取统计数据
        const {data} = await rpaStatisticalDetail()
        console.log(data);
        this.cardList = [
          {
            img: totalImg,
            // icon: 'gift',
            num: data[0].Totals,
            title: 'user.verification-code.required111566110577366',
            color: 'blue',
            BackgroundColor: "green"
          },
          {
            img: activeImg,
            // icon: 'bank',
            num: data[0].Submitted,
            title: 'menu.list.search-list1122',
            color: 'green',
            BackgroundColor: "bule"
          },
          {
            img: draftImg,
            // icon: 'control',
            num: data[0].Draft,
            title: 'menu.list.search-list112233',
            color: 'firebrick',
            BackgroundColor: "bule"
          },
        ]
      } catch (error) {
        console.log("[rpa.headers]报错内容: ", error)
        this.$message.error(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.card {
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 20px;
  padding-right: 150px;

  h4 {
    font-size: 30px;
  }

  p {
    font-size: 16px;
    color: #999;
  }

}

</style>